<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>查询显示所有的菜单表格数据人教版</title>
		<script src="js/vue.js"></script><!-- 必须先导入vue -->
		<script src="js/axios.min.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/common.js"></script>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<div id="app">
			<el-button size="mini" @click="add">添加</el-button>
			<el-table size="small" :data="tableData" border style="width: 100%">
				<el-table-column prop="label" label="菜单" width="180">
				</el-table-column>
				<el-table-column prop="href" label="地址">
				</el-table-column>
				<el-table-column prop="parentid" label="上级ID">
				</el-table-column>
				<el-table-column prop="imgicon" label="图标">
				</el-table-column>
				<el-table-column width="250px" label="操作">
					<template slot-scope="scope">
						<el-button size="mini"  @click="updateMenu(scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-dialog  title="添加" :visible.sync="dialogFormVisible">
				<el-form :model="formadd">
					<el-form-item label="菜单名字"   label-width="80px">
						<el-input v-model="formadd.label" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="连接地址"   label-width="80px">
						<el-input v-model="formadd.href" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="图标"  label-width="80px">
						<i :class="formadd.imgicon"></i>
						  <el-select v-model="formadd.imgicon" placeholder="请选择图标">
						    <el-option v-for="item in imgiconOptions"
							:label="item"
							:value="item"
							>
								<span><i :class="item"></i>{{item}}</span>
						    </el-option>
						  </el-select>
					</el-form-item>
					<el-form-item label="所属父级"  label-width="80px" >
					<div class="block">
					  <el-cascader :props="parentProps"
					    :show-all-levels="false"
					    v-model="formadd.parentid"
					    :options="parentidOptions"
					    ></el-cascader>
					</div>
					</el-form-item>
					
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="addsubmit">确 定</el-button>
				</div>
			</el-dialog>
			
			<el-dialog  title="编辑" :visible.sync="updateFormVisible">
				<el-form :model="formup">
					<el-form-item label="菜单名字"   label-width="80px">
						<el-input v-model="formup.label" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="连接地址"   label-width="80px">
						<el-input v-model="formup.href" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="图标"  label-width="80px">
						<i :class="formup.imgicon"></i>
						  <el-select v-model="formup.imgicon" placeholder="请选择图标">
						    <el-option v-for="item in imgiconOptions"
							:label="item"
							:value="item"
							>
								<span><i :class="item"></i>{{item}}</span>
						    </el-option>
						  </el-select>
					</el-form-item>
					<el-form-item label="所属父级"  label-width="80px" >
					<div class="block">
					  <el-cascader :props="parentProps"
					    :show-all-levels="false"
					    v-model="formup.parentid"
					    :options="parentidOptions"
					    ></el-cascader>
					</div>
					</el-form-item>
					
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="updateFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="updatesubmit">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				imgiconOptions:["el-icon-platform-eleme","el-icon-delete-solid","el-icon-phone",
				"el-icon-star-off","el-icon-goods","el-icon-error","el-icon-camera",
				"el-icon-s-order","el-icon-s-promotion"],
				parentProps:{value:"id",emitPath:false,checkStrictly:true},//配置父级的cascader
				tableData: [],
				dialogFormVisible: false, //控制增加显示隐藏
				updateFormVisible: false, 
				formadd: {
					label: "",
					href: "",
					imgicon: "",
					parentid:0
				} ,//增加菜单的form
				parentidOptions:[],
				formup: {
					id:"",
					label: "",
					href: "",
					imgicon: "",
					parentid:0
				} 
			},
			methods: {
				updateMenu(row){
					this.selectAllMenu();//先填充父级菜单下拉列表
					axios.get(API + "s/selectmenubyid/"+row.id).then(res => {
						this.formup=res.data.data.menu
					})
					// this.formup = {
					// 	id: row.id,
					// 	label: row.label,
					// 	href: row.href,
					// 	parentid: row.parentid,
					// 	imgicon: row.imgicon,
					// }
					this.updateFormVisible=true;
				},
				initData() {
					axios.get(API + "s/selevtMenu").then(res => {
						console.log(res.data.data.menuList);
						this.tableData = res.data.data.menuList;
					})
				},
				add() {
					this.formadd= {
						label: "",
						href: "",
						imgicon: "",
						parentid:0
					} 
					//获取所有的菜单集合
					this.dialogFormVisible = true;
					this.selectAllMenu();
				},addsubmit(){
					console.log(this.formadd);
					axios.post(API + "s/insertmeun", this.formadd).then(res => {
						if (res.data) {
							this.$message("新增成功")
							this.dialogFormVisible = false;
							this.initData();
						} else {
							this.$message("新增失败")
						}
					})
				},updatesubmit(){
					axios.post(API + "s/updatemeun", this.formup).then(res => {
						if (res.data) {
							this.$message("修改成功")
							
							this.initData();
						} else {
							this.$message("修改失败")
						}
						
					})
					this.updateFormVisible = false;
				},selectAllMenu(){
					axios.get(API + "s/selevtMenu").then(res => {
						let arr=arrayToTree(res.data.data.menuList);
						this.parentidOptions = arr;
					
					})
				}
			},
			mounted() {				
				this.initData();
			}
		})
	</script>
</html>